<template>
  <div class="MyInfo">
    <van-nav-bar title="个人资料" left-arrow @click-left="$router.go(-1)" />
    <div class="top">
      <van-uploader :after-read="afterRead"  :before-read="beforeRead" multiple :max-count="1"
      :max-size="10240 * 10240" @oversize="onOversize">
        <van-image
        round
        width="10rem"
        height="10rem"
        fit="cover"
        position="center"
        :src="avatarUrl === null ? 'http://121.196.246.91:8080/img/author/default-avatar.png' : avatarUrl"
      />
      </van-uploader>
    </div>
    <van-cell-group>
      <van-cell title="用户名" :value="userName" is-link @click="editUserName = true,newName = userName"/>
      <van-cell title="已绑定手机" :value="phone" is-link/>
      <van-cell title="默认地址" :label="address" is-link @click="addressShow = true,getAddressList()"/>
    </van-cell-group>

    <van-popup round v-model="editUserName" overlay>
      <div class="editUserName">
        <h3>修改昵称</h3>
        <van-field v-model="newName" clearable maxlength="10" autofocus/>
        <button class="saveButton" @click="updateUserName">保存</button>
      </div>
    </van-popup>

    <van-popup v-model="addressShow" position="bottom" closeable round :style="{ 'max-height':'70%' }">
      <div>
        <van-address-list
          v-model="chosenAddressId"
          :list="addressList"
          default-tag-text="默认"
          :switchable="false"
          @edit="handleEdit"
          @add="handleAdd"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { uploadAvatar, getUserInfoEdit, updateUserName, getAddressList } from '@/api/user'
export default {
  data () {
    return {
      userName: '',
      phone: '',
      address: '',
      avatarUrl: '',
      editUserName: false,
      newName: '',
      searchResult: [],
      addressShow: false,
      addressList: [],
      chosenAddressId: '1'

    }
  },
  async created () {
    const res = await getUserInfoEdit()
    this.userName = res.data.userName == null ? '用户' + res.data.id : res.data.userName
    this.phone = res.data.phone
    this.address = res.data.address == null
      ? '暂无'
      : res.data.address.province + res.data.address.city + res.data.address.district +
    res.data.address.street + res.data.address.detail + res.data.address.name + res.data.address.phone
    this.avatarUrl = res.data.avatarUrl
  },
  methods: {
    beforeRead (file) {
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJPGOrPNG) {
        this.$toast.fail('请上传图片格式')
        return false
      }
      return true
    },
    async afterRead (file) {
      this.file = file
      const res = await uploadAvatar(file)
      this.avatarUrl = res.data
    },
    onOversize (file) {
      this.$toast('文件大小不能超过 10M')
    },
    async updateUserName () {
      if (this.newName === this.userName) {
        this.editUserName = false
        return
      }
      if (this.newName.trim() === '') {
        this.$toast('用户名不能为空')
        return
      }
      await updateUserName(this.newName)
      this.$toast('修改成功')
      this.editUserName = false
      this.userName = this.newName
    },
    async getAddressList () {
      const res = await getAddressList()
      this.addressList = res.data
    },
    handleEdit (item) {
      this.$router.push(`/editaddress/${item.id}`)
    },
    handleAdd () {
      this.$router.push('/editAddress/0')
    }
  },
  watch: {

  }
}
</script>

<style  scoped>
.top {
  display: flex;
  justify-content: center;   /* 水平居中 */
}
.editUserName {
  width: 200px;
  height: 130px;
  text-align: center;
}
.editUserName h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 12px;
}
.saveButton {
  padding: 10px 50px 10px 50px;
  border: none;
  margin-top: 15px;
  background-color: rgb(245, 71, 71);
  border-radius: 5px;
  color:aliceblue
}
.addressListItem {
  padding: 5px;
  text-align: center;
}
</style>
